<template>
	<view class="" :style="viewColor">
	   <view class="bg-white wrap" style="border-radius: 5px; margin: 10px;">
		   <view class="display-flex-column" style="padding: 0 18px 20px 18px;">
		   	<vtabs  v-model="current"  :scroll="false" :tabs="list" @change="change"> </vtabs>
		   	   
		   	   <view class="row-center" v-if="current == 2">
		   	   	<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_time.png" ></image>
		   	   	<view class="row-center bb-line">
		   	   		<view class="bb-title">用车天数</view>
		   			<picker @change="confirmDays" :value="index" range-key="label"	 :range="daysList">
		   				<input @click="dayShow=true" v-model="days_short" disabled placeholder="请选择用车天数"/>
		   			</picker>
		   	   	</view>
		   	   </view>
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_po.png"></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">出发</view>
		   				<view @click="goselAdd(1)" style="flex: 1;" hover-class="navigator-hover">
		   					<view class="display-flex display-flex-align-center address-input" style="height:44px">
		   						<view v-if="form.origin" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.origin}}</view>
		   						<view v-else class=" color-999" style="font-size:26upx">您要从哪儿出发</view>
		   					</view>
		   				</view>
		   			</view>
		   		</view>
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/end_po.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">到达</view>
		   				<view @click="goselAdd(2)" style="flex: 1;" hover-class="navigator-hover">
		   					<view class="display-flex display-flex-align-center address-input" style="height:44px;">
		   						<view v-if="form.destination" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.destination}}</view>
		   						<view v-else class=" color-999" style="font-size:26upx;">您要到哪儿去</view>
		   					</view>
		   				</view>
		   			</view>
		   		</view>
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_time.png"></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">去程时间</view>
		   				<xPicker  @confirm="goConfirm" mode="ymdhi">
		   					<input  v-model="go_time_short" disabled placeholder="请选择您的出发时间"/>
		   				</xPicker>
		   					
		   			</view>
		   		</view>
		   		<view class="row-center" v-if="current==1">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/return_time.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">返程时间</view>
		   				<xPicker  @confirm="backConfirm" mode="ymdhi">
		   					<input  v-model="back_time_short" disabled placeholder="请选择您的返程时间"/>
		   				</xPicker>
		   			</view>
		   		</view>
		   	<!-- 	<view class="row-center" >
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/car_type.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">车辆类型</view>
		   				<input @click="openCarType" v-model="form.car_type" disabled placeholder="请选择车辆类型"/>
		   			</view>
		   		</view> -->
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/nums.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">用车人数</view>
		   				<input  v-model="form.people_sum"  type="number" placeholder="请输入用车人数"/>
		   			</view>
		   		</view>
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/contact.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">联系人</view>
		   				<input  v-model="form.name"   placeholder="请填写联系人姓名"/>
		   			</view>
		   		</view>	
		   		<view class="row-center">
		   			<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/phone.png" ></image>
		   			<view class="row-center bb-line">
		   				<view class="bb-title">联系电话</view>
		   				<input  v-model="form.phone"  maxlength="11" placeholder="请填写联系人手机号"/>
		   			</view>
		   		</view>
		   		
		   		<view @click="submitTrip" class="bule-button" style="margin-top: 18px;">
		   			提交
		   		</view>
		   </view>
					
			
	   </view>
	   
	   <view class="pd-12 br-10 bg-color-eee mt-15  mb-10">
	   	<view class="text-16 text-black ft-w700 mb-15 text-align-center">
	   		包车流程
	   	</view>
	   	<view class="display-flex display-flex-align-center display-flex-justify-center mb-15">
	   		<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
	   			<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
	   				<view class="iconfont icon-icon-pencil">	
	   				</view>
	   			</view>
	   			<view class="text-12">
	   				填写需求
	   			</view>
	   		</view>
	   		<view class="dz-dash" ></view>
	   		<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
	   			<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
	   				<view class="iconfont icon-fenzu">	
	   				</view>
	   			</view>
	   			<view class="text-12">
	   				平台报价
	   			</view>
	   		</view>
	   		<view class="dz-dash" ></view>
	   		<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
	   			<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
	   				<view class="iconfont icon-fukuan">	
	   				</view>
	   			</view>
	   			<view class="text-12">
	   				支付费用
	   			</view>
	   		</view>
	   		<view class="dz-dash"></view>
	   		<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
	   			<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
	   				<view class="iconfont icon-7">	
	   				</view>
	   			</view>
	   			<view class="text-12">
	   				开心出行
	   			</view>
	   		</view>
	   	
	   	</view>
	   </view>
		 <view class="mb-100">
			<recommend v-if="recommend_switch == 1" :hostProduct='hostProduct' :isLogin="isLogin"></recommend>
		 </view>
	   <view class="row-center whiteBg bt-footer" >
	   	<view class=" display-flex-column" style="align-items:center;justify-content:center;">
	   	
	   		<kefu :size='22' icon="https://qiniu.gzyxly.cn/def/32a17202411052214238959.png"></kefu>
	   		<text >客服</text>
	   	</view>
	   	<view @click="gotoOrderList" class="display-flex-column" style="align-items:center;justify-content:center;">
	   		<image class="icon-44" src="https://qiniu.gzyxly.cn/def/b475820251102135115222.png"></image>
	   		<text >订单</text>
	   	</view>
	   	<view @click="gotoXuzhi" class="display-flex-column" style="align-items:center;justify-content:center;">
	   		<image class="icon-44" src="https://qiniu.gzyxly.cn/def/f2287202511021351151870.png"></image>
	   		<text >包车须知</text>
	   	</view>
	   	    
	   </view>
	   		
	
	
		<!-- <u-select v-model="dayShow" mode="single-column" :list="daysList" @confirm="confirmDays"></u-select> -->
		<uni-popup type="bottom" ref="carTypeRef"  background-color="#fff">
			<view class="br-10" style="height: 400px;background:#f7f7f7">
				<view class="row-center" style="padding: 10px;justify-content: space-between;">
					<view  class=""  @click="closeCarType"  style="color: #bdbdbd;">
						取消
					</view>
					<view class="" style="color: #121212;font-size: 15px;font-weight: 700;">
						选择车辆
					</view>
					<view  @click="closeCarType" class="" style="color: #007AFF;">
						确定
					</view>
				</view>
				<view class="content" >
					<scroll-view scroll-y="true" v-if="carTypeList.length">
						<view style="padding-bottom: 20px;">
							<view style="margin: 10px;" class="row-center" v-for="(item,index) in carTypeList" :key="index">
								<view class="">
									{{item.name}}
								</view>
								<view  style="margin-left: auto;">
									<wNumber  :value="item.num" color="#007AFF" :params="index" @change="valchange" :min="0" :max="100"></wNumber>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	
	</view>	
</template>

<script>

	import {
		toLogin
	} from '@/libs/login.js';
	import  {vtabs}  from "@/components/vTabs/index.vue"
	import  {xPicker}  from "@/components/xPicker/index.vue"
	import  {wNumber}  from "@/components/wNumber/index.vue"
	import { configMap, getCustomer } from "@/utils";
	import recommend from '@/components/recommend';
	import { mapGetters } from "vuex";
	import { getProductHot } from '@/api/store.js';
	import { getUserInfo } from '@/api/user.js';
	import { getBaocheList, saveBaoche } from "@/api/api.js"
	
	let app = getApp();
	export default {
	    computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
		components:{vtabs,xPicker,wNumber,recommend},
		data() {
			return {
				isAuto: true, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				carTypeList: [
					{
					  "id": 420,
					  "name": "别克GL8（7座）"
					},
					{
					  "id": 421,
					  "name": "起亚(7座)"
					},
					{
					  "id": 422,
					  "name": "伊斯坦纳(15座)"
					},
					{
					  "id": 423,
					  "name": "考斯特(19座)"
					},
					{
					  "id": 424,
					  "name": "金龙(29座)"
					},
					{
					  "id": 425,
					  "name": "金龙(37座)"
					},
					{
					  "id": 426,
					  "name": "宇通(45座)"
					},
					{
					  "id": 427,
					  "name": "金龙(53座)"
					}
				],
				carTypeShow: false,
				days_short: '',
				dayShow: false,
				daysList: [
					{
						value: 1,
						label: '1天'
					},
					{
						value: 2,
						label: '2天'
					},
					{
						value: 3,
						label: '3天'
					},
					{
						value: 4,
						label: '4天'
					},
					{
						value: 5,
						label: '5天'
					},
					{
						value: 6,
						label: '6天'
					},
					{
						value: 7,
						label: '7天'
					},
					{
						value: 8,
						label: '8天'
					},
					{
						value: 9,
						label: '9天'
					},
					{
						value: 10,
						label: '10天'
					},
					{
						value: 11,
						label: '11天'
					},
					{
						value: 12,
						label: '12天'
					},
					{
						value: 13,
						label: '13天'
					},
					{
						value: 14,
						label: '14天'
					},
					{
						value: 15,
						label: '15天'
					},
					{
						value: 16,
						label: '16天'
					},
					{
						value: 17,
						label: '17天'
					},
					{
						value: 18,
						label: '18天'
					},
					{
						value: 19,
						label: '19天'
					},
					{
						value: 20,
						label: '20天'
					},
					{
						value: 21,
						label: '21天'
					},
					{
						value: 22,
						label: '22天'
					},
					
					{
						value: 23,
						label: '23天'
					},
					{
						value: 24,
						label: '24天'
					},
					{
						value: 25,
						label: '25天'
					},
					{
						value: 26,
						label: '26天'
					},
					{
						value: 27,
						label: '27天'
					},
					{
						value: 28,
						label: '28天'
					},
					{
						value: 29,
						label: '29天'
					},
					{
						value: 30,
						label: '30天'
					},
				],
				goShow:false,
				backShow:false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				list: [ '单程','往返', '包天'],
				current: 0,
				go_time_short: '',
				back_time_short: '',
				car_type_str: '',
				form: { 
					type:'',
					origin: '',
					destination: '',
					go_time: '',
					back_time: '',
					people_sum: '',
					name: '',
					phone: '',
					days: '',
					car_type:''
				},
				hostProduct: []
			};
		},
		onShow() { 
			if(this.isLogin == true){
				 // this.getUserInfo()
			}else{ 
			}
			
			this.form.origin = uni.getStorageSync("start_baoche")?uni.getStorageSync("start_baoche"):"";
			this.form.destination = uni.getStorageSync("end_baoche")?uni.getStorageSync("end_baoche"):"";
		},
		onLoad(option) {	
			// this.getList()
			if(!this.isLogin){
				// toLogin()
			} else {
				this.getUserInfo();
			}
			this.get_host_product();
		},
		onReady() {
		},
		methods:{
			/**
			 * 获取用户详情
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					if(res.data.phone){
						this.form.phone = res.data.phone;
					}
				});
			},
			get_host_product: function () {
				let that = this;
				let data = { offset: 1, limit: 10 }
				getProductHot().then(function (res) {
					that.$set(that,'hostProduct',res.data.list);
				});
			},
			openCarType(){
				this.$refs.carTypeRef.open();
			},
			closeCarType(){
				this.$refs.carTypeRef.close();
			},
			goselAdd(type){
				uni.navigateTo({
					url: '/pages/bus/search_address/index?op=baoche&&type='+type
				})
				
			},
			gotoOrderList(){
				if(!this.isLogin){
					toLogin()
				} else {
					uni.navigateTo({
						url: "/pages/bus/baoche/order_list"
					})
				}
				
			},
			gotoXuzhi(){
				uni.navigateTo({
					url: "/pages/annex/web_view/index?url=https://m.gzyxly.cn/baochexuzhi.html"
				})
			},
			contactUs: function contactUs() {
				uni.makePhoneCall({
					phoneNumber: "19922822214"
				});
			},
			goCustomer: function() {
				let that = this;
				if (that.isLogin === false) {
					toLogin()
				} else {
					let url = `/pages/chat/customer_list/chat`;
					console.log('app.globalData.sys_service_data',app.globalData.sys_service_data)
					getCustomer(app.globalData.sys_service_data, url);
				}
			},
			submitTrip(){
				if(!this.isLogin){
					toLogin()
					return
				} 
				if(!this.form.origin){
					return this.$util.Tips({
						title: '请选择出发地'
					}); 
				}
				if(!this.form.destination){
					return this.$util.Tips({
						title: '请选择目的地'
					}); 
				}
				if(!this.form.go_time){
					return this.$util.Tips({
						title: '请选择去程时间'
					}); 
				}
				if(!this.form.back_time&&this.current==1){
					return this.$util.Tips({
						title: '请选择返程时间'
					}); 
				}
				// if(!this.form.car_type){
				// 	return this.$util.Tips({
				// 		title: '请选择车辆类型'
				// 	}); 
				// }
				if(!this.form.people_sum){
					return this.$util.Tips({
						title: '请输入用车人数'
					}); 
				}
				if(!this.form.name){
					return this.$util.Tips({
						title: '请输入联系人姓名'
					}); 
				}
				if(!this.form.phone){
					return this.$util.Tips({
						title: '请输入联系人手机号'
					}); 
				}
				const regex = /^1[3456789]\d{9}$/;//使用此正则即可
				if (!regex.test(this.form.phone)){
					return this.$util.Tips({
						title: '请输入联系人正确手机号'
					}); 
				}
	
				if(!this.form.days&&this.current==2){
					return this.$util.Tips({
						title: '请选择用车天数'
					}); 
				}
				this.form.type = this.current + 1;
				
				uni.showLoading({ title: '请稍后' });
				saveBaoche(this.form).then(res => {
					this.$util.Tips({
						title: '提交成功'
					}); 
					uni.hideLoading()
					uni.navigateTo({
						url:"/pages/bus/baoche/order_list",
					})
				}).catch(err => {
					return this.$util.Tips({
						title: err.meg
					}); 
				})
			},
			
			valchange(e){
				this.carTypeList[e.params].num = e.value
				var str = ''
				this.carTypeList.forEach(el => {
					if(el.num&&el.num != 0){
						str == '' ? (str = (el.name + 'X'+ el.num)) : (str = str + ';' + (el.name + 'X'+ el.num))
					}
				})
				this.form.car_type = str
				
			},
			getList(){
				getBaocheList().then(res => {
					res.data.forEach( el => {
						this.carTypeList.push(
						{
							name: el.name,
							num: 0
						})
					})
				}).catch(err => {
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			confirmDays(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				
			    var day = this.daysList[e.detail.value]
				this.form.days =day.value
				this.days_short = day.label

			},
			goConfirm(e){
				
				console.log("e",e)
					console.log("e.value",e.value)
				var time = new Date(e.value);
				console.log("time",time)
				var y = this.fmtNumber(time.getFullYear());
				var m = this.fmtNumber(time.getMonth()+1);
				var d = this.fmtNumber(time.getDate());
				var h = this.fmtNumber(time.getHours());
				var mm = this.fmtNumber(time.getMinutes());
				var s = this.fmtNumber(time.getSeconds());
				this.go_time_short = m + '月' + d + '日 ' +h + ':' + mm;
				this.form.go_time = y + '-' + m + '-' +d + ' ' + h + ':' + mm;
				console.log("go_time_short",this.go_time_short)				
				console.log("this.form.goTime",this.form.go_time)	
								
		
			},
			backConfirm(e){
			
				console.log("e",e)
				var time = new Date(e.value);
				console.log("time",time)
				var y = this.fmtNumber(time.getFullYear());
				var m = this.fmtNumber(time.getMonth()+1);
				var d = this.fmtNumber(time.getDate());
				var h = this.fmtNumber(time.getHours());
				var mm = this.fmtNumber(time.getMinutes());
				var s = this.fmtNumber(time.getSeconds());
				this.back_time_short = m + '月' + d + '日 ' +h + ':' + mm;
				this.form.back_time = y + '-' + m + '-' +d + ' ' + h + ':' + mm;
				console.log("go_time_short",this.go_time_short)				
				console.log("this.form.goTime",this.form.back_time)	
						
			},
			change(index) {
				this.current = index;
			},
			fmtNumber(n) {
				return n > 9 ? n + "" : "0" + n
			},
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.wrap{
	    padding-bottom: 72px;
		// padding: 20rpx 24rpx;
		color: #1b1b1b;
	}
	.icon-44 {
	    width: 44rpx;
	    height: 44rpx;
	}
	.bb-title{
		margin-right: 14px;
	    width: auto;
		color: #1b1b1b;
		font-size: 15px;
			
	}
	
	.bb-line {
		flex: 1;
		border-bottom: 0.5px solid #E4E4E4;
		padding: 10px 0;
	}
	.content {
	    padding: 24rpx;
	    text-align: center;
	}
	.bule-button{
		color: #fff;
		text-align: center;
		padding: 15px 0;
		background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		margin-right: 15px;
		margin-bottom: 15px;
		border-radius: 25px;
		font-size: 15px;
		width: 100%;
		
	}
	.bt-footer{
		background-color: #fff; 
		position:fixed;
		z-index:9;
		bottom:0;
		left:0;
		right:0;
		padding:8px 12px;
		justify-content:space-around; 
		box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
		padding-bottom:8px;
		height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.dz-block{
		width: 60px;
	}
	
	.dz-img{
		width: 35px;
		height: 35px;
		border: 1px solid var(--view-theme);
		border-radius: 50%;
		color: var(--view-theme);
	}
	.dz-dash{
		// widt h: 50px;
		border-bottom: 1px dashed #000;
		// width: 100%;
		width: 50px;
		/* margin: 0 10px; */
		// margin-left: 10px;
		// margin-right: 10px;
		margin-bottom: 20px;
	}
</style>